<template>
  <div class="signed-agreenment-view view-container">

    <header-module left-custom padding>
      <template #left-con>
        <span style="font-size: 16px">新建精细招商要素</span>
      </template>

      <template #btn>
        <el-button class="main-btn" size="small" @click="onBack">返回</el-button>
        <el-button class="main-btn" size="small" type="primary" @click="onConfirm">提交审核</el-button>
      </template>

    </header-module>

    <div class="main-content">

      <item-title title="基本信息"/>

      <informationView ref="information" :datas="formData" :list="tableData" @change="onChange"/>

      <item-title title="注册开发终端信息"/>

      <terminalView ref="terminal" :area="area" :datas="formData" :list="tableData"/>

    </div>

  </div>
</template>

<script>
import {useRoute, useRouter} from 'vue-router'
import {getScreenAreaData} from "../../../../../../../utils/areaFuc";
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, toRefs} from 'vue'

export default defineComponent({
  name: "index",
  components: {
    informationView: defineAsyncComponent(
        () => import('./modules/informationView.vue')
    ),
    terminalView: defineAsyncComponent(
        () => import('./modules/terminalView.vue')
    )
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var data = reactive({
      formData: {
        productId: 0,
        productPopularName: '',
        approvalNumber: '',
        packSpecs: '',
        sellUnit: '',
        terminalType: '', // 终端客户类型
        agentAttribute: '', // 代理属
        areas: [],
        region: [],
        tradePrice: '', // 交易价
        agentEndTime: '', // 代理结束时间
        minSale: '', // 最低销量
        minSaleUnit: '1', // 最低销量单位
        minSalePromise: '', // 销量保证金
        headName: '',
        headId: '',
        remark: '', // 其他约定
        agentId: 0, // 代理商id
        abstract: '',
      },
      tableData: [],
      area: [],
      information: null,
      terminal: null,
    })

    const onBack = () => {
      router.back()
    }

    const onChange = () => {
      data.area = getScreenAreaData(data.formData.region)
    }

    const onConfirm = () => {
      Promise.all([data.information.validata(), data.terminal.validata()]).then(() => {
        for (let i = 0; i < data.tableData.length; i++) {
          if (data.tableData[i].terminalPrice <= data.formData.tradePrice) {
            currentInstance.proxy.customMessage({type: 'error', message: '交易价不能大于或等于终端价'})
            return
          }
        }
        data.formData.tradePrice = Number(data.formData.tradePrice)
        data.formData.minSale = Number(data.formData.minSale)
        data.formData.minSalePromise = Number(data.formData.minSalePromise)
        let a = {
          agentProduct: data.formData,
          form: {
            productId: data.formData.productId,
            terminals: data.tableData,
            headId: data.formData.headId,
            headName: data.formData.headName,
          }
        }
        console.log(a)
        api.signedAgent.AGENT_PRODUCT_CREATE_TERMINAL(a).then(res => {
          if (!res.code) {
            currentInstance.proxy.customMessage({type: 'success', message: '提交成功'})
            router.back()
          } else {
            currentInstance.proxy.customMessage({type: 'error', message: res.msg})
          }
        })
      }).catch(() => {

      })
    }

    const getData = (id) => {
      api.signedAgent.AGENT_PRODUCT_DETAIL(id).then(res => {
        if (!res.code && res.data) {
          console.log(res.data)
        }
      })
    }

    onMounted(() => {
      if (route.query.id) {
        getData(route.query.id)
      }
    })

    return {
      ...toRefs(data),

      onBack,
      onChange,
      onConfirm,
    }
  }
})
</script>

<style scoped>

</style>
